﻿<div>
    <div class="ma-auto position-relative" style="max-width: 300px">
        <MOtpInput @bind-Value="@otp" Disabled="@isLoading" OnFinish="OnFinish"></MOtpInput>

        <MOverlay Absolute Contained Value="@isLoading">
            <MProgressCircular Indeterminate Color="primary"></MProgressCircular>
        </MOverlay>
    </div>
    <div>
        Expected value: <span class="font-weight-bold"> @expectedOtp </span>
    </div>
    <div class="text--caption">Type or copy/paste.</div>

    <MSnackbar Color="@snackbarColor" Timeout="2000" Value="@snackbar">
        <ChildContent>
            @text
        </ChildContent>
    </MSnackbar>
</div>
<style type="text/css">
    .position-relative {
        position: relative;
    }
</style>
@code {
    string otp = "";
    bool isLoading;
    string expectedOtp = "133707";
    string snackbarColor = "default";
    bool snackbar = false;
    string text = "";

    public async Task OnFinish(string value)
    {
        this.snackbar = false;
        this.isLoading = true;
        await Task.Delay(3500);
        this.isLoading = false;
        this.snackbarColor = (value == this.expectedOtp) ? "success" : "warning";
        this.text = $"Processed OTP with {value} ({snackbarColor})";
        this.snackbar = true;
    }
}